<template>
  <div>
    <nut-button @click="click1">$store.state.app.userName</nut-button>
    <br />
    <br />
    <nut-button @click="click2">$store.state.app.userName的长度=={{nameLength}}</nut-button>
    <br />
    <br />
   getter传惨 {{$store.getters.addname(99)}}
    <br />
    <br />
     <nut-button @click="click3">mapMutation 同步换名字-----{{$store.state.app.userName}}</nut-button>
    <br />
    <br />
    <nut-button @click="click4">mapActions 异步换名字-----{{$store.state.app.userName}}</nut-button>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "app",
  data() {
    return {};
  },
  mounted() {
  
  },
  methods: {
    ...mapMutations(["changeName"]),
    ...mapActions(["actionA"]),
    click1() {
      alert(this.$store.state.app.userName);
    },
    click2() {
      console.log(this.nameLength);
    },
    click3() {
      this.changeName("zhangcuicui");
    },
    click4() {
      this.actionA(Math.random());
    }
  },
  computed: {
    ...mapGetters(["nameLength"])
  }
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.wrap {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
}
</style>
